<template>
  <div>
    <Main_header></Main_header>
    <div class="common">
      <div class="content">
        <!--全部商品图片展示-->
        <div class="contentImg">
          <div class="title">
            <h2>收货信息</h2>
            <div>
            </div>
          </div>
          <div class="user-container">
            <el-card class="user-card" v-for="(address,index) in addList" :key="index" shadow="never">
              <div>
                <div cLass="userinfo-container">
                  <div>地址编号: {{address.addressId}}</div>
                  <div>收货人: {{address.userName}}</div>
                  <div>手机号: {{address.contactPhone}}</div>
                  <div>地址: {{address.takeAddres}}</div>
                  <div>默认:
                    <el-switch
                      v-model="address.adrsDefault"
                      active-color="#13ce66"
                      inactive-color="#ff4949"
                      active-text="选用"
                      @change="enabledChange(address)">
                    </el-switch>
                  </div>
                </div>
              </div>
            </el-card>
            <el-card class="user-card" shadow="never">
              <div>
                <div>
                  <el-button style="font-size: 45px;color: #cccccc;margin-left: 80px;margin-top: 20px"
                             class='el-icon-circle-plus'
                             type="text"
                  @click="addAddress"></el-button>
                </div>
              </div>
            </el-card>
          </div>

        </div>
        <!--全部商品图片展示-->
        <div style="width:100%;margin-top: 50px">
          <div class="title">
            <h2>购物清单</h2>
            <div>
            </div>
          </div>
          <div>
            <el-table
              :data="cartList"
              style="width: 100%">
              <el-table-column
                property="imgurl"
                label="商品图"
                width="80">
                <template #default="scope">
                  <el-image class="table-td-thumb"
                            :src="scope.row.imgurl"
                            :preview-src-list="[scope.row.imgurl]">
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column
                property="goodName"
                label="商品名称"
                width="340"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                property="category"
                label="商品类型"
                width="120">
              </el-table-column>
              <el-table-column
                property="rentPriceHour"
                label="价格/小时"
                width="90">
              </el-table-column>
              <el-table-column
                property="rentPriceDay"
                label="价格/天"
                width="80">
              </el-table-column>
              <el-table-column
                property="yaPrice"
                label="押金"
                width="80">
              </el-table-column>
              <el-table-column
                property="brand"
                label="品牌"
                width="80">
              </el-table-column>
              <el-table-column
                property="usedKnow"
                label="使用须知">
              </el-table-column>
            </el-table>
            <el-table
              :data="rentList"
              style="width: 100%">
              <el-table-column
                prop="number"
                label="数量"
                width="50">
              </el-table-column>
              <el-table-column
                prop="singlePrice"
                label="价格/小时"
                width="90">
                <template slot-scope="scope">
                  {{scope.row.singlePrice==null?'-':scope.row.singlePrice}}
                </template>
              </el-table-column>
              <el-table-column
                prop="dayPrice"
                label="价格/天"
                width="80">
                <template slot-scope="scope">
                  {{scope.row.dayPrice==null?'-':scope.row.dayPrice}}
                </template>
              </el-table-column>
              <el-table-column
                prop="yarent"
                label="押金"
                width="60">
              </el-table-column>
              <el-table-column
                prop="tolRentPrice"
                label="总价"
                width="70">
              </el-table-column>
              <el-table-column
                prop="paystate"
                label="支付状态"
                width="80">
                <template slot-scope="scope">
                  <el-tag size="small" :type="scope.row.paystate=='0'?'danger':'success'">
                    {{scope.row.paystate=='0'?'待付款':'已支付'}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="starttime"
                label="租赁开始时间"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="endtime"
                label="租赁结束时间"
                sortable
                width="180">
              </el-table-column>
              <el-table-column
                prop="orderAddress"
                label="地址编号"
                width="80"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="info" size="mini" @click="handleDelete(scope.$index, scope.row)">取消
                  </el-button>
                  <el-button type="primary" size="mini" @click="pay">支付
                    <i class="el-icon-coin el-icon--right"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!--弹框-->
    <el-dialog title="添加地址" :visible.sync="dialogVisible" :center="true" width="500px">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="收货人姓名" prop="userName">
          <el-input v-model="formData.userName" placeholder="请输入收货人姓名" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="收货人手机" prop="contactPhone">
          <el-input v-model="formData.contactPhone" placeholder="请输入收货人手机" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="默认地址" prop="adrsDefault" required disabled>
          <el-switch v-model="formData.adrsDefault" active-text="默认" active-color="#26D05C"
                     inactive-color="#EF4F4F"></el-switch>
        </el-form-item>
        <el-form-item label="收货地址" prop="takeAddres">
          <el-input v-model="formData.takeAddres" type="textarea" placeholder="请输入收货地址"
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
    <Main_footer style="margin:0 auto"></Main_footer>
  </div>
</template>

<script>
  import Main_header from '../../components/main/Main_header'
  import Main_footer from '../../components/main/Main_footer'
  export default {
    name: 'CheckOut',
    components: {
      Main_footer,
      Main_header
    },
    data(){
      return{
        user:JSON.parse(window.sessionStorage.getItem('user')),
        cartList:[],
        addList: [],
        rentList:[],
        dialogVisible:false,
        formData: {
          adrsUserId:undefined,
          userName: undefined,
          contactPhone: undefined,
          adrsDefault: false,
          takeAddres: undefined,
        },
        rent:{
          rentId:undefined,
          orderAddress:undefined,
          singlePrice:undefined,
          dayPrice:undefined,
        },
        payInfo:{
          rentId:'',
          dayPrice:'',
          singlePrice:'',
          totalAmount:'',//付款金额
        },
        updateAdrs:{},
        rules: {
          userName: [{
            required: true,
            message: '请输入收货人姓名',
            trigger: 'blur'
          }],
          contactPhone: [{
            required: true,
            message: '请输入收货人手机',
            trigger: 'blur'
          }],
          takeAddres: [{
            required: true,
            message: '请输入收货地址',
            trigger: 'blur'
          }],
        },
      }
    },
    mounted(){
      this.initMyAddress();
    },
    methods:{
      addAddress(){
        this.formData.adrsUserId=this.user.userId
        this.dialogVisible=true
        this.resetView()
      },
      resetView () {
        this.formData.userName=''
        this.formData.contactPhone=''
        this.formData.takeAddres=''
        this.formData.adrsDefault=false
      },
      // 添加地址
      handelConfirm() {
          // 添加事件
          this.$refs['elForm'].validate(valid => {
            if (!valid) return
            this.postRequest('/rent/address',this.formData).then(resp => {
              if (resp) {
                this.$notify.success({ title: '成功', message: resp.message });
                this.dialogVisible=false;
                this.initMyAddress()
              }
            })
          })
      },
      pay(){
        this.$router.push({
          path: '/payGood',
          name: 'PayGood',
          params: {
            name: this.payInfo.totalAmount,
            dayPrice:this.payInfo.dayPrice,
            rentId:this.payInfo.rentId,
            singlePrice:this.payInfo.singlePrice,
          }
        })
      },
      // 删除
      handleDelete(index,data){
        this.$confirm('此操作将移除租赁商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteRequest('/rent/data/delete/'+data.rentId).then(resp=>{
            this.$router.push('/main');
          })
          this.$notify.success({ title: '成功', message: '取消成功' });
        }).catch(() => {
          this.$notify.info({ title: '消息', message: '已取消操作' });
        });
      },
      //查询商品
      initPayGood(){
        // 取到detail页面的路由带过来的参数
        let routerParams = this.$route.params.name;
        console.log('我在checkout'+routerParams);
        this.postRequest('/goodList/selectById/?goodId='+routerParams).then(resp => {
          if (resp) {
            console.log(resp);
            this.payInfo.subject=resp.goodName
            this.cartList=[]
            this.cartList.push(resp);
            this.initRent();
          }
        })
      },
      enabledChange(data){
        this.updateAdrsHander()
        // 修改地址状态改变
        this.putRequest('/rent/address',data).then(resp=>{
          if (resp){
            console.log("我是默认地址3")
          }
        })
        console.log(data.adrsDefault)
        if(data.adrsDefault){
          this.rent.rentId = this.$route.params.rentName;
          this.rent.orderAddress=data.addressId
          // 修改配送地址状态
          this.putRequest('/rent/data/updateRent',this.rent).then(resp=>{
            if (resp){
              this.$notify.success({ title: '成功', message: resp.message });
              this.initMyAddress();
            }
          })
        }
      },
      updateAdrsHander(){
        // 获取用户的默认地址
        this.getRequest('/rent/address/?userId='+this.user.userId+'&adrsDefault='+true).then(resp=>{
          if (resp){
            this.updateAdrs=resp
            console.log("我是默认地址1",resp)
            this.updateAdrsHander1()
          }
        })
      },
      updateAdrsHander1(){
        // 修改默认地址状态
        if(this.updateAdrs){
          this.updateAdrs.adrsDefault=false
          console.log("我是默认地址2"+this.updateAdrs)
          this.putRequest('/rent/address',this.updateAdrs).then(resp=>{
            if (resp){
            }
          })
        }
      },

      // 查询订单
      initRent(){
        let routerParams2 = this.$route.params.rentName;
        console.log('我在checkout'+routerParams2);
        this.postRequest('/rent/data/addRent/'+routerParams2).then(resp => {
          if (resp) {
            this.payInfo.totalAmount=resp.tolRentPrice
            this.payInfo.rentId=resp.rentId
            this.payInfo.singlePrice=resp.singlePrice
            this.payInfo.dayPrice=resp.dayPrice
            if(resp.dayPrice){
              this.rent.dayPrice=resp.dayPrice
            }else{
              this.rent.singlePrice=resp.singlePrice
            }
            console.log(resp);
            this.rentList=[]
            this.rentList.push(resp);
          }
        })
      },
      //查询全部地址
      initMyAddress () {
        this.getRequest('/rent/address/'+this.user.userId).then(resp => {
          if (resp) {
            console.log('我呢'+resp);
            this.addList=resp;
            this.initPayGood();
          }
        })
      },
    },
  }
</script>

<style scoped>

  .common{
    width: 70%;
    margin: 50px auto;
  }
  .content{
    width: 100%;
  }
  .contentImg{
    width: 100%;
  }
  .user-card{
    width: 100%;
  }
  .img-container{
    width: 100%;
    display: flex;
    margin-left: 20px;
  }
  .user-container{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 400px;
    background-color: #ffffff;
  }
  .user-card{
    background-color: #ffffff;
    width: 24%;
    height: 150px;
    margin-right: 4px;
    margin-left: 4px;
    margin-top: 10px;
  }
  .img-container{
    width: 100%;
    display: flex;
  }
  .userinfo-container{
    font-size: 16px;
    color: #929390;
    margin-left: 30px;
    margin-top: 10px;
  }

</style>


